<template>
	<el-tabs v-model="activeName" type="card">
		<el-tab-pane label="全部意见" name="first">
			<el-table ref="table" :data="bpmStepRunList" row-key="stepRunId" stripe :show-header="false">
				<el-table-column label="#" type="index" width="50"></el-table-column>
				<el-table-column prop="progress" width="250">
					<template #default="scope">
						<div style="position: relative;">
							<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
							<span style="position: absolute;margin-left: 10px">{{ scope.row.userName }}</span>
						</div>
						<div>
							{{ scope.row.stepName }}
						</div>
						<div>
							<el-tag type='success' effect='dark' v-if="scope.row.createType=='0'">正常转交</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='1'">委托</el-tag>
							<el-tag type='warning' effect='dark' v-else-if="scope.row.createType=='2'">回退</el-tag>
							<el-tag type='warning' effect='dark' v-else-if="scope.row.createType=='3'">收回</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='4'">管理员转交</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='5'">跳跃</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='6'">前加签</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='7'">后加签</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='10'">业务系统创建</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='p'">父流程创建</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='c'">子流程返回</el-tag>
							<el-tag type='info' effect='dark' v-else>未知</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column width="200">
					<template #default="scope">
						<div style="position: relative;">
							<el-avatar :src="scope.row.createAvatar" size="small"></el-avatar>
							<span style="position: absolute;margin-left: 10px">{{ scope.row.createUserName }}</span>
						</div>
						<div>
							办理类型:
							<el-tag type='success' effect='dark' v-if="scope.row.opFlag=='0'">主办</el-tag>
							<el-tag type='info' effect='dark' v-else>经办</el-tag>
						</div>
						<div>
							当前状态:{{ scope.row.status == '1' ? '已办结' : '办理中' }}
							<span style="margin-left: 20px">
										<sc-status-indicator v-if="scope.row.status=='1'" pulse
															 type="success"></sc-status-indicator>
										<sc-status-indicator v-else pulse type="warning"></sc-status-indicator>
									</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column width="220">
					<template #default="scope">
						<div>发送时间:{{ scope.row.createTime }}</div>
						<div>接收时间:{{ scope.row.recTime }}</div>
						<div>办结时间:{{(scope.row.endTime == '' || scope.row.endTime == undefined) ? '未办结' : scope.row.endTime}}</div>
					</template>
				</el-table-column>
				<el-table-column  min-width="180">
					<template #default="scope">
						<div style="float: right;position: relative;">
							<el-icon v-if="scope.row.passStatus=='1'" style="color:#67C23A;font-size: 20px">
								<el-icon-circle-check-filled/>
							</el-icon>
							<el-icon v-else-if="scope.row.passStatus=='0'" style="color:#F56C6C;font-size: 20px">
								<el-icon-circle-close-filled/>
							</el-icon>
							<el-icon v-else style="color:#909399;font-size: 20px">
								<el-icon-clock/>
							</el-icon>
						</div>
						<div style="width: 100%">
							<div>
								{{ scope.row.ideaText }}
							</div>
							<attach-menu :attachIds="scope.row.stepAttach" :roleFlag="3" :preview="true"></attach-menu>
						</div>
						<div style="text-align: right;margin-right: 30px;margin-top: 20px;" v-if="hiddenOpt">
							<el-icon style="font-size: 20px;cursor: pointer" title="回复" @click="replyIdea(scope.row)"><el-icon-chat-dot-square/></el-icon>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-tab-pane>
		<el-tab-pane  name="second">
			<template #label>
				同部门意见 <sc-status-indicator pulse type="danger" style="position: absolute;right: 5px;top:5px" v-if="this.deptIdeaList.length>0"></sc-status-indicator>
			</template>
			<el-table ref="table" :data="deptIdeaList" row-key="stepRunId" stripe :show-header="false">
				<el-table-column label="#" type="index" width="50"></el-table-column>
				<el-table-column prop="progress" width="250">
					<template #default="scope">
						<div style="position: relative;">
							<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
							<span style="position: absolute;margin-left: 10px">{{ scope.row.userName }}</span>
						</div>
						<div>
							{{ scope.row.stepName }}
						</div>
						<div>
							<el-tag type='success' effect='dark' v-if="scope.row.createType=='0'">正常转交</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='1'">委托</el-tag>
							<el-tag type='warning' effect='dark' v-else-if="scope.row.createType=='2'">回退</el-tag>
							<el-tag type='warning' effect='dark' v-else-if="scope.row.createType=='3'">收回</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='4'">管理员转交
							</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='5'">跳跃</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='6'">前加签</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='7'">后加签</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='10'">业务系统创建
							</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='p'">父流程创建
							</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='c'">子流程返回
							</el-tag>
							<el-tag type='info' effect='dark' v-else>未知</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column width="200">
					<template #default="scope">
						<div style="position: relative;">
							<el-avatar :src="scope.row.createAvatar" size="small"></el-avatar>
							<span style="position: absolute;margin-left: 10px">{{ scope.row.createUserName }}</span>
						</div>
						<div>
							办理类型:
							<el-tag type='success' effect='dark' v-if="scope.row.opFlag=='0'">主办</el-tag>
							<el-tag type='info' effect='dark' v-else>经办</el-tag>
						</div>
						<div>
							当前状态:{{ scope.row.status == '1' ? '已办结' : '办理中' }}
							<span style="margin-left: 20px">
										<sc-status-indicator v-if="scope.row.status=='1'" pulse
															 type="success"></sc-status-indicator>
										<sc-status-indicator v-else pulse type="warning"></sc-status-indicator>
									</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column width="220">
					<template #default="scope">
						<div>发送时间:{{ scope.row.createTime }}</div>
						<div>接收时间:{{ scope.row.recTime }}</div>
						<div>办结时间:{{(scope.row.endTime == '' || scope.row.endTime == undefined) ? '未办结' : scope.row.endTime}}</div>
					</template>
				</el-table-column>
				<el-table-column  min-width="180">
					<template #default="scope">
						<div style="float: right;position: relative;">
							<el-icon v-if="scope.row.passStatus=='1'" style="color:#67C23A;font-size: 20px">
								<el-icon-circle-check-filled/>
							</el-icon>
							<el-icon v-else-if="scope.row.passStatus=='0'" style="color:#F56C6C;font-size: 20px">
								<el-icon-circle-close-filled/>
							</el-icon>
							<el-icon v-else style="color:#909399;font-size: 20px">
								<el-icon-clock/>
							</el-icon>
						</div>
						<div style="width: 100%">
							<div v-html="scope.row.ideaText">
							</div>
							<attach-menu :attachIds="scope.row.stepAttach" :roleFlag="3" :preview="true"></attach-menu>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-tab-pane>
		<el-tab-pane name="third">
			<template #label>
				@我的 <sc-status-indicator pulse type="danger" style="position: absolute;right: 5px;top:5px" v-if="this.aboutMeIdeaList.length>0"></sc-status-indicator>
			</template>
			<el-table ref="table" :data="aboutMeIdeaList" row-key="stepRunId" stripe :show-header="false">
				<el-table-column label="#" type="index" width="50"></el-table-column>
				<el-table-column prop="progress" width="250">
					<template #default="scope">
						<div style="position: relative;">
							<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
							<span style="position: absolute;margin-left: 10px">{{ scope.row.userName }}</span>
						</div>
						<div>{{ scope.row.stepName }}</div>
						<div>
							<el-tag type='success' effect='dark' v-if="scope.row.createType=='0'">正常转交</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='1'">委托</el-tag>
							<el-tag type='warning' effect='dark' v-else-if="scope.row.createType=='2'">回退</el-tag>
							<el-tag type='warning' effect='dark' v-else-if="scope.row.createType=='3'">收回</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='4'">管理员转交
							</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='5'">跳跃</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='6'">前加签</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='7'">后加签</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='10'">业务系统创建
							</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='p'">父流程创建
							</el-tag>
							<el-tag type='danger' effect='dark' v-else-if="scope.row.createType=='c'">子流程返回
							</el-tag>
							<el-tag type='info' effect='dark' v-else>未知</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column width="200">
					<template #default="scope">
						<div style="position: relative;">
							<el-avatar :src="scope.row.createAvatar" size="small"></el-avatar>
							<span style="position: absolute;margin-left: 10px">{{ scope.row.createUserName }}</span>
						</div>
						<div>
							办理类型:
							<el-tag type='success' effect='dark' v-if="scope.row.opFlag=='0'">主办</el-tag>
							<el-tag type='info' effect='dark' v-else>经办</el-tag>
						</div>
						<div>
							当前状态:{{ scope.row.status == '1' ? '已办结' : '办理中' }}
							<span style="margin-left: 20px">
										<sc-status-indicator v-if="scope.row.status=='1'" pulse
															 type="success"></sc-status-indicator>
										<sc-status-indicator v-else pulse type="warning"></sc-status-indicator>
									</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column width="220">
					<template #default="scope">
						<div>发送时间:{{ scope.row.createTime }}</div>
						<div>接收时间:{{ scope.row.recTime }}</div>
						<div>办结时间:{{(scope.row.endTime == '' || scope.row.endTime == undefined) ? '未办结' : scope.row.endTime}}</div>
					</template>
				</el-table-column>
				<el-table-column  min-width="180">
					<template #default="scope">
						<div style="float: right;position: relative;">
							<el-icon v-if="scope.row.passStatus=='1'" style="color:#67C23A;font-size: 20px">
								<el-icon-circle-check-filled/>
							</el-icon>
							<el-icon v-else-if="scope.row.passStatus=='0'" style="color:#F56C6C;font-size: 20px">
								<el-icon-circle-close-filled/>
							</el-icon>
							<el-icon v-else style="color:#909399;font-size: 20px">
								<el-icon-clock/>
							</el-icon>
						</div>
						<div style="width: 100%">
							<div v-html="scope.row.ideaText">
							</div>
							<attach-menu :attachIds="scope.row.stepAttach" :roleFlag="3" :preview="true"></attach-menu>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-tab-pane>
		<el-tab-pane label="步骤动态" name="fourth">
			<template #label>
				步骤动态 <sc-status-indicator pulse type="danger" style="position: absolute;right: 5px;top:5px" v-if="this.bpmStepRunReplyList.length>0"></sc-status-indicator>
			</template>
			<el-table ref="table" :data="bpmStepRunReplyList" row-key="stepRunId" stripe :show-header="false">
				<el-table-column>
					<template #default="scope">
						<div style="float: right;position: relative;">
							<el-icon v-if="scope.row.passStatus=='1'" style="color:#67C23A;font-size: 20px">
								<el-icon-circle-check-filled/>
							</el-icon>
							<el-icon v-else-if="scope.row.passStatus=='0'" style="color:#F56C6C;font-size: 20px">
								<el-icon-circle-close-filled/>
							</el-icon>
							<el-icon v-else style="color:#909399;font-size: 20px">
								<el-icon-clock/>
							</el-icon>
						</div>
						<div style="width: 100%;margin-bottom: 30px">
							<div>
								<div style="margin-bottom: 20px">
									<span style="font-size: 16px;font-weight: 600;margin-right: 20px;">{{ scope.row.stepName }}</span>
									<el-tag type='success' effect='dark' v-if="scope.row.opFlag=='0'">主办</el-tag>
									<el-tag type='info' effect='dark' v-else>经办</el-tag>
								</div>
								{{ scope.row.ideaText }}
							</div>
							<attach-menu :attachIds="scope.row.stepAttach" :roleFlag="3" :preview="true"></attach-menu>
							<div style="display: flex;float:right;">
								<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
								<span style="margin-left: 10px;margin-right: 10px;">{{scope.row.createUserName }}</span>
								<div style="display: flex">
									<span style="margin-right: 30px;">{{scope.row.recTime }}</span>
								</div>
							</div>
						</div>
						<div v-if="scope.row.rList!=null" style="background: #faebd7">
							<div v-for="rItem in scope.row.rList" :key="rItem.recordId" style="padding:10px;">
								<div>{{rItem.content}}</div>
								<div style="text-align: right;width:100%;">
									<div style="display: flex;margin-top: 10px;">
										<el-avatar :src="rItem.avatar" size="small"></el-avatar>
										<span style="margin-left: 10px;margin-right:10px;">{{rItem.createUserName }}</span>
										<div style="display: flex">
											<span style="margin-right: 10px;">{{rItem.createTime }}</span>
											<el-icon v-if="hiddenOpt&&rItem.createUser==accountId" style="font-size: 16px;cursor: pointer;top:5px;" title="删除" @click="deleteReply(rItem.recordId)"><el-icon-delete/></el-icon>
										</div>
									</div>
								</div>

							</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-tab-pane>
	</el-tabs>
	<replyIdeaDialog v-if="dialog.save" ref="replyIdeaDialog" @closed="dialog.save=false"></replyIdeaDialog>
</template>
<script>
import replyIdeaDialog from "./replyidea";
import bpmsys from './bpmsys'
import AttachMenu from '@/views/module/attachMenu'

export default {
	mixins: [bpmsys],
	props: {
		hiddenOpt:{type:Boolean},
		approval: {type:String},
		bpmStepRunList: {type:Array}
	},
	components: {
		AttachMenu,
		replyIdeaDialog
	},
	data() {
		return {
			dialog: {
				save: false,
			},
			activeName: 'first',
			aboutMeIdeaList: [],
			deptIdeaList:[],
			bpmStepRunReplyList:[],
			runId:this.$route.query.runId,
			accountId:this.$TOOL.data.get("USER_INFO").accountId,
			me: this.$TOOL.data.get("USER_INFO").userName,
			deptId:this.$TOOL.data.get("USER_INFO").deptId,
			thisBpmStepRunList:this.bpmStepRunList
		}
	},
	watch: {
		"activeName": {
			handler(val) {
				if (val === 'third') {
					this.aboutMeIdeaList = [];
					this.bpmStepRunList.forEach(item => {
						if (item.ideaText!==undefined&&item.ideaText.indexOf("@" + this.me) > 0) {
							let ideaTextRecord = JSON.parse(JSON.stringify(item));
							let ideaText =  item.ideaText;
							ideaTextRecord.ideaText = ideaText.replace("@"+this.me,"<span style='color:#409eff'>@"+this.me+"</span>");
							this.aboutMeIdeaList.push(ideaTextRecord);
						}
					})
				}else if(val==='second')
				{
					this.deptIdeaList = [];
					this.bpmStepRunList.forEach(item => {
						if (item.deptId===this.deptId && item.createUser!==this.accountId) {
							this.deptIdeaList.push(item);
						}
					})
				}else if(val==='fourth')
				{
					this.getAllBpmStepRunReplyList(this.runId);
				}
			}
		},
	},
	beforeMount() {
		this.aboutMeIdeaList = [];
		this.deptIdeaList = [];
		this.bpmStepRunList.forEach(item => {
			if (item.ideaText !== undefined && item.ideaText.indexOf("@" + this.me) > 0) {
				let ideaTextRecord = JSON.parse(JSON.stringify(item));
				let ideaText = item.ideaText;
				ideaTextRecord.ideaText = ideaText.replace("@" + this.me, "<span style='color:#409eff'>@" + this.me + "</span>");
				this.aboutMeIdeaList.push(ideaTextRecord);
			}
			if (item.deptId===this.deptId && item.createUser!==this.accountId) {
				this.deptIdeaList.push(item);
			}
		})
		this.getAllBpmStepRunReplyList(this.runId);
	},
	methods: {
		replyIdea(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.replyIdeaDialog.open().setData(row)
			})
			this.aboutMeIdeaList = [];
			this.bpmStepRunList.forEach(item => {
				if (item.ideaText!==undefined&&item.ideaText.indexOf("@" + this.me) > 0) {
					let ideaTextRecord = JSON.parse(JSON.stringify(item));
					let ideaText =  item.ideaText;
					ideaTextRecord.ideaText = ideaText.replace("@"+this.me,"<span style='color:#409eff'>@"+this.me+"</span>");
					this.aboutMeIdeaList.push(ideaTextRecord);
				}
			})
		},
		async getAllBpmStepRunReplyList(runId) {
			if(runId==undefined)
			{
				return;
			}
			let res = await this.$API.bpm.bpmStepRunReply.getAllBpmStepRunReplyList.get({runId: runId});
			if (res.code == 200) {
				this.bpmStepRunReplyList = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async deleteReply(recordId){
			let res = await this.$API.bpm.bpmStepRunReply.deleteBpmStepRunReply.post({recordId: recordId});
			if (res.code == 200) {
				this.$message.success("操作成功");
				this.getAllBpmStepRunReplyList(this.runId);
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		}
	}
}
</script>
<style scoped>
>>> .el-descriptions__label {
	width: 200px;
}

>>> .is-bordered-content {
	width: 300px;
}
</style>
